<template>
  <div class="userset">
    <el-form
      label-width="90px"
      label-position="left"
      class="form_box"
    >
      <el-form-item label="昵称:">
        {{nickname}}
      </el-form-item>
      <el-form-item label="手机号:">
        {{userName}} <a>修改</a>
      </el-form-item>
      <el-form-item label="用户余额:">
        ￥{{num}}
      </el-form-item>
      <el-form-item label="原密码:">
        <el-input
          v-model="oldpwd"
          placeholder="请输入原密码"
          type="password"
        ></el-input>
        <span class="tishi">{{pwdtxt}}</span>
      </el-form-item>
      <el-form-item label="新密码:">
        <el-input
          v-model="newpwd"
          placeholder="请输入新密码"
          type="password"
        ></el-input>
        <span class="tishi">{{newtxt}}</span>
      </el-form-item>
      <el-form-item label="重复新密码:">
        <el-input
          v-model="checkpwd"
          placeholder="请输入重复新密码"
          type="password"
        ></el-input>
        <span class="tishi">{{checktxt}}</span>
      </el-form-item>
      <el-form-item label="">
        <el-button
          type="warning"
          plain
          @click="changepwd"
        >修改密码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "userset",
  data() {
    return {
      nickname: "",
      userName: "",
      oldpwd: "",
      newpwd: "",
      checkpwd: "",
      pwdtxt: "",
      newtxt: "",
      checktxt: "",
      num: "",
    };
  },
  methods: {
    // 获取用户信息
    getuserinfo() {
      this.$post(this.url + "/user/get", {
        userName: this.$store.state.user.userName,
      }).then((res) => {
        if (res.errorCode == "0") {
          this.nickname = res.data.nickName;
          this.userName = res.data.userName;
        }
      });
    },
    // 获取余额
    getyue() {
      this.$post(this.url + "/account/userAccount", {
        userId: this.$store.state.user.id,
      }).then((res) => {
        if (res.errorCode == 0) {
          this.num = res.data;
        }
      });
    },
    changepwd() {
      if (this.oldpwd == "" && this.newpwd == "" && this.checkpwd == "") {
        this.pwdtxt = "原密码不能为空";
        this.newtxt = "新密码不能为空";
        this.checktxt = "重复密码不能为空";
      } else if (this.oldpwd == "" && this.newpwd == "") {
        this.pwdtxt = "原密码不能为空";
        this.newtxt = "新密码不能为空";
      } else if (this.oldpwd == "" && this.checkpwd == "") {
        this.pwdtxt = "原密码不能为空";
        this.checktxt = "重复密码不能为空";
      } else if (this.newpwd == "" && this.checkpwd == "") {
        this.newtxt = "新密码不能为空";
        this.checktxt = "重复密码不能为空";
      } else if (this.newpwd != this.checkpwd) {
        this.checktxt = "两次密码不相同";
      } else {
        this.$post(this.url + "/user/updatePwd", {
          userId: this.$store.state.user.id,
          oldPwd: this.oldpwd,
          newPwd: this.checkpwd,
        }).then((res) => {
          if (res.errorCode == "0") {
            this.$message({
              message: "修改成功,请重新登录",
              type: "success",
            });
            sessionStorage.clear();
            this.$router.push("/login");
            location.reload();
          } else {
            this.$message({
              message: "旧密码错误请重新输入",
              type: "warning",
            });
          }
        });
      }
    },
  },
  created() {
    this.getuserinfo();
    this.getyue();
  },
};
</script>

<style scoped>
.nick {
  width: 90%;
  margin: 0 auto;
}
.pwd {
  width: 95%;
  margin: 0 auto;
}
.tishi {
  color: red;
}
.form_box {
  margin: 25px;
  width: 35%;
}
</style>